<template>
	<u-popup :show="isShow" @close="onchange(false)" @open="onchange(true)" mode="left" length="70%">

		<view class="pop-top">

			<image src="../../static/work/work_head.png" mode=""></image>

			<view class="poptop-text">
				<text>{{userInfo.username}}</text>
				<text class="pop-role">{{userInfo.role}}</text>
			</view>



		</view>

		<view class="pop-phone">
			<image src="../../static/sidebar/mobile.png" mode=""></image>
			<text>{{userInfo.mobile}}</text>
		</view>

		<view class="pop-phone" style="margin-top: 9rpx;">
			<image src="../../static/sidebar/address.png" mode=""></image>
			<text>{{userInfo.deptName}}</text>
		</view>

		<u-line color="#efefef" margin="50rpx 0 0"></u-line>

		<view class="about-us">关于我们</view>
    <text class="protocal" @click="goweb(305)">&laquo用户协议&raquo</text>
    <text class="protocal" @click="goweb(304)">&laquo隐私协议&raquo</text>
<!--		<view class="version">软件版本:1.9.0</view>-->
		<view class="version">版权所有:深圳市行知网络科技有限公司</view>


		<u-line color="#efefef" class="bottom-line"></u-line>

		<view class="logout" @click="logout">
			<image src="../../static/sidebar/logout.png" mode=""></image>
			<text>退出登录</text>
		</view>

	</u-popup>
</template>

<script>
	export default {
		name: 'sidebar',
		props: {
			showSidebar: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				isShow:false,
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo;
			}
		},
		methods:{
      goweb(type){
        uni.navigateTo({
          url:'/pagesA/rich-text/rich-text?type='+type
        })
      },

			onchange(value){
				this.$emit('input', value);
			},
			
			logout(){
				uni.showModal({
					content:'确定退出吗？',
					success:res=>{
						if(res.confirm){
							this.$store.commit('user/saveUserInfo', null)
							uni.setStorageSync('saveUserInfo', null)
							
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}
					}
				})
			},
			
		},
		watch:{
			showSidebar(){
				this.isShow = this.showSidebar;
			}
		}
	}
</script>

<style lang="scss">
	.pop-top {
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;


		image {
			width: 118rpx;
			height: 118rpx;
			margin-top: 90rpx;
			min-width: 118rpx;

		}

		.poptop-text {
			flex-grow: 1;
			margin-left: 10rpx;
			margin-top: 95rpx;

			:nth-child(1) {
				display: block;
				color: $black33;
				font-weight: 700;
				font-size: 28rpx;
			}

			.pop-role {
				font-size: 24rpx;
				color: $blue15;
				margin-top: 10rpx;
				line-height: 28rpx;

				//两行显示，超出显示省略号
				// overflow: hidden;
				// -webkit-line-clamp: 3;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
			}

		}

	}

	.pop-phone {
		margin-left: 30rpx;
		margin-top: 30rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			vertical-align: middle;
		}

		text {
			margin-left: 10rpx;
			vertical-align: middle;
			font-size: 24rpx;
			color: $black33;
		}
	}

	.about-us {
		margin: 50rpx 30rpx 40rpx;
		font-weight: 700;
		font-size: 36rpx;
		color: $black33;
	}

	.version {
		margin: 0 30rpx 17rpx;
		font-size: 24rpx;
		color: $graya7;
	}

	.protocal {
		margin: 0 30rpx 17rpx;
		font-size: 24rpx;
		color: $graya7;
	}

	.logout {
		display: flex;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		align-items: center;

		image {
			width: 38rpx;
			height: 38rpx;
			margin-left: 30rpx;
		}

		text {
			margin-left: 8rpx;
			font-size: 28rpx;
			color: $graya7;
		}
	}

	.bottom-line {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
	}
</style>
